<!--/** 通用表格 Demo */-->
<script setup lang="ts">
import { ref } from 'vue';
import TablePage from '@/components/table/TablePage.vue';
import { ITableColumn, ITableConfig } from '@/components/table/tablePageInterface';
import { ETableType } from '@/components/table/tableTools';
import useElTools from '@/hooks/use-el-tools/useElTools';

const tableConfig = ref<ITableConfig>({
  height: '60vh',
  showIndex: true,
  showSelect: false,
  stripe: true
});

const tableColumn = ref<Array<ITableColumn>>([
  {
    label: '日期',
    prop: 'date',
    type: ETableType[2],
    // vauleGetter: (data: any) => data.date + '-' + data.name,
    clickHandle: (data) => {
      useElTools.generalElMessage(JSON.stringify(data), 'success');
    },
    linkBtnOptions: {
      type: 'primary',
      iconShow: true,
      iconHref: '#icon-xiazai'
    }
  },
  { label: '名字', prop: 'name' },
  { label: '地址', prop: 'address' },
  {
    label: '操作',
    prop: '',
    type: ETableType[3],
    vauleGetter: () => '操作',
    btnList: [
      {
        label: '编辑',
        vauleGetter: () => '编辑',
        disabledGetter: () => false,
        clickHandle: (data) => {
          useElTools.generalElMessage('编辑' + JSON.stringify(data), 'success');
        },
        type: 'primary',
        iconShow: true,
        iconHref: '#icon-xiazai'
      },
      {
        label: '删除',
        clickHandle: (data) => {
          useElTools.generalElMessage('删除' + JSON.stringify(data), 'success');
        },
        type: 'danger'
      }
    ]
  }
]);

const tableData = ref<Array<object>>([
  { date: '2016-05-03', name: 'Tom1', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' }
]);

function selectable(data: any, callback: Function) {
  let flag = true;
  console.log('=>(TablePageDemo.vue:109) data', data);
  // if (data.name === 'Tom1') flag = false;
  callback(flag);
}

function selectableChangeHandle(selection: Array<any>) {
  console.log(selection);
}
</script>

<template>
  <div>
    <TablePage
      style="box-sizing: border-box; width: 100vw"
      :table-column="tableColumn"
      :table-data="tableData"
      :table-config="tableConfig"
      @selectable="selectable"
      @selectable-change="selectableChangeHandle"
    >
    </TablePage>
  </div>
</template>

<style lang="scss" scoped></style>
